<template>
  <view class="container">
    <!-- 用户信息 -->
    <view class="user-info">
      <view class="user-avatar" @click="goto">
        <image :src="userInfo.avatarUrl" mode="aspectFill"></image>
      </view>
      <view class="user-detail">
        <view class="user-name-and-icons">
          <view class="user-name">{{ userInfo.name }}</view>
          <view class="user-icons">
			<uni-icons type="mail-open" color="#3cc88c" size="24"></uni-icons>
			<uni-icons type="chatbubble" color="#3cc88c" size="24"></uni-icons>
			<uni-icons type="gear" color="#3cc88c" size="24"></uni-icons>
          </view>
        </view>
        <view class="user-status">
          <view class="user-points">
            <text>创作积分: {{ userInfo.points }}</text>
          </view>
          <view class="user-vip">
            <text>{{ userInfo.vipStatus }}</text>
          </view>
        </view>
        <view class="user-phone">
          <text>{{ userInfo.phone }}</text>
        </view>
      </view>
    </view>

    <!-- 统计卡片 -->
    <view class="stats-cards">
      <view class="stats-card" v-for="(stat, index) in statsList" :key="index">
        <text class="stats-value">{{ stat.value }}</text>
        <text class="stats-name">{{ stat.name }}</text>
      </view>
    </view>

    <!-- 作品管理和积分卡片大盒子 -->
    <view class="combined-box">
      <view class="tabs">
        <view
          :class="{ 'tab-item': true, active: currentTab === 0 }"
          @click="changeTab(0)"
        >
          <text>作品管理</text>
        </view>
        <view
          :class="{ 'tab-item': true, active: currentTab === 1 }"
          @click="changeTab(1)"
        >
          <text>积分卡片</text>
        </view>
        <view
          :class="{ 'tab-item': true, active: currentTab === 2 }"
          @click="changeTab(2)"
        >
          <text>回收站</text>
        </view>
      </view>
      <view v-if="currentTab === 0" class="works-management">
        <view class="works-list">
          <view
            class="work-card"
            v-for="(item, index) in filteredWorkList"
            :key="item.id"
            @click="toMusicDetail(item.id)"
          >
            <view class="work-cover">
              <image :src="item.coverUrl" mode="aspectFill"></image>
            </view>
            <view class="work-info">
              <view class="work-title-container">
                <text class="work-title">{{ item.title }}</text>
                <uni-icons type="more-filled" color="#3cc88c"></uni-icons>
              </view>
              <view class="work-meta">
                <view class="work-date">{{ item.createTime }}</view>
                <view class="work-actions">
                  <uni-icons type="eye" name="eye" color="#3cc88c"></uni-icons>
                  <text>{{ item.playCount }}</text>
                  <uni-icons
                    type="heart"
                    name="heart"
                    color="#3cc88c"
                    style="margin-left: 15rpx"
                  ></uni-icons>
                  <text>{{ item.likeCount }}</text>
                  <uni-icons type="redo-filled" color="#3cc88c"></uni-icons>
                  <view class="text">分享</view>
                </view>
              </view>
            </view>
            <view class="work-options">
              <u-icon
                name="ellipsis-v"
                size="24"
                color="#3cc88c"
                @click.stop="showWorkOptions(index)"
              ></u-icon>
            </view>
          </view>
        </view>
      </view>
      <view v-if="currentTab === 1" class="points-card">
        <view class="points-header">
          <text class="points-title">创作积分余额</text>
          <text class="points-more" @click="toPointsDetail">查看明细</text>
        </view>
        <view class="points-content">
          <text class="points-balance">{{ userInfo.points }}</text>
          <text class="points-unit">积分</text>
          <view class="points-benefits">
            <view class="benefit-item">兑换会员</view>
            <view class="benefit-item">课程抵扣</view>
            <view class="benefit-item">专属道具</view>
          </view>
        </view>
        <view class="points-actions">
          <button class="action-btn recharge" @click="rechargePoints">
            充值
          </button>
          <button class="action-btn exchange" @click="exchangeRewards">
            兑换
          </button>
        </view>
      </view>
      <view v-if="currentTab === 2" class="recycle-bin">
        <view class="works-list">
          <view
            class="work-card"
            v-for="(item, index) in recycleBinList"
            :key="item.id"
            @click="restoreWork(index)"
          >
            <view class="work-cover">
              <image :src="item.coverUrl" mode="aspectFill"></image>
            </view>
            <view class="work-info">
              <view class="work-title">{{ item.title }}</view>
              <view class="work-meta">
                <view class="work-date">删除于 {{ item.deleteTime }}</view>
              </view>
            </view>
            <view class="work-options">
              <u-icon
                name="trash"
                size="24"
                color="#FF4500"
                @click.stop="permanentlyDeleteWork(index)"
              ></u-icon>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from "vue"

const userInfo = ref({
  name: "XiaoYoe",
  avatarUrl: "https://picsum.photos/200/200?random=user",
  points: 1280,
  vipStatus: "高级会员",
  phone: "13800138000", 
})

const statsList = ref([
  { name: "关注", value: 28 },
  { name: "粉丝", value: 156 },
  { name: "获赞", value: 234 },
  { name: "作品", value: 84 },
  { name: "收藏", value: 288 },
])

const currentWorkTab = ref(0)
const workList = ref([
  {
    id: 1,
    title: "夏日海滩",
    coverUrl: "https://picsum.photos/200/200?random=1",
    createTime: "2025-06-15",
    playCount: 328,
    likeCount: 42,
    isPrivate: false,
  },
  {
    id: 2,
    title: "森林漫步",
    coverUrl: "https://picsum.photos/200/200?random=2",
    createTime: "2025-06-10",
    playCount: 256,
    likeCount: 36,
    isPrivate: false,
  },
  {
    id: 3,
    title: "雨夜钢琴",
    coverUrl: "https://picsum.photos/200/200?random=3",
    createTime: "2025-06-05",
    playCount: 189,
    likeCount: 28,
    isPrivate: true,
  },
  {
    id: 4,
    title: "星空幻想",
    coverUrl: "https://picsum.photos/200/200?random=4",
    createTime: "2025-05-28",
    playCount: 156,
    likeCount: 24,
    isPrivate: false,
  },
  {
    id: 5,
    title: "城市节奏",
    coverUrl: "https://picsum.photos/200/200?random=5",
    createTime: "2025-05-20",
    playCount: 123,
    likeCount: 18,
    isPrivate: false,
  },
])

const recycleBinList = ref([
  {
    id: 6,
    title: "清晨咖啡",
    coverUrl: "https://picsum.photos/200/200?random=6",
    createTime: "2025-05-15",
    deleteTime: "2025-07-01",
    playCount: 98,
    likeCount: 15,
    isPrivate: false,
  },
  {
    id: 7,
    title: "山间小屋",
    coverUrl: "https://picsum.photos/200/200?random=7",
    createTime: "2025-05-10",
    deleteTime: "2025-06-28",
    playCount: 76,
    likeCount: 12,
    isPrivate: false,
  },
  {
    id: 8,
    title: "海边日落",
    coverUrl: "https://picsum.photos/200/200?random=8",
    createTime: "2025-05-05",
    deleteTime: "2025-06-20",
    playCount: 112,
    likeCount: 18,
    isPrivate: false,
  },
])

const currentTab = ref(0)

// 计算属性
const filteredWorkList = computed(() => {
  switch (currentWorkTab.value) {
    case 0:
      return workList.value.filter((item) => !item.isPrivate)
    case 1:
      return workList.value.filter((_, index) => index < 3)
    case 2:
      return workList.value.filter((item) => item.isPrivate)
    default:
      return workList.value
  }
})

// 生命周期
onMounted(() => {
  getWorks()
})

// 方法
const goto = () => {
  uni.navigateTo({
    url: "/pages/demo/demo",
  })
}

const getWorks = () => {
  console.log("获取作品列表，当前标签页：", currentWorkTab.value)
}

const changeWorkTab = (index) => {
  currentWorkTab.value = index
  getWorks()
}

const toMusicDetail = (id) => {
  uni.navigateTo({
    url: `/pages/music/detail?id=${id}`,
  })
}

const showWorkOptions = (index) => {
  const item = filteredWorkList.value[index]
  uni.showActionSheet({
    itemList: [item.isPrivate ? "取消私密" : "设为私密", "删除作品"],
    itemColor: ["#666", "#FF4500"],
    success: (res) => {
      if (res.tapIndex === 0) {
        setWorkPrivate(index)
      } else if (res.tapIndex === 1) {
        moveToRecycleBin(index)
      }
    },
  })
}

const setWorkPrivate = (index) => {
  const item = filteredWorkList.value[index]
  const originalIndex = workList.value.findIndex((w) => w.id === item.id)

  uni.showLoading({ title: "处理中..." })
  setTimeout(() => {
    workList.value[originalIndex].isPrivate =
      !workList.value[originalIndex].isPrivate
    uni.hideLoading()
    uni.showToast({
      title: workList.value[originalIndex].isPrivate
        ? "已设为私密"
        : "已取消私密",
      icon: "success",
    })
  }, 800)
}

const moveToRecycleBin = (index) => {
  const item = filteredWorkList.value[index]
  const originalIndex = workList.value.findIndex((w) => w.id === item.id)

  uni.showModal({
    title: "确认删除",
    content: "删除后将移至回收站，确定要删除吗？",
    confirmColor: "#FF4500",
    success: (res) => {
      if (res.confirm) {
        uni.showLoading({ title: "删除中..." })
        setTimeout(() => {
          const removedItem = workList.value.splice(originalIndex, 1)[0]
          // 添加删除时间
          removedItem.deleteTime = "2025-07-11"
          recycleBinList.value.push(removedItem)
          uni.hideLoading()
          uni.showToast({ title: "已移至回收站", icon: "success" })
        }, 800)
      }
    },
  })
}

const restoreWork = (index) => {
  const item = recycleBinList.value[index]
  uni.showModal({
    title: "确认恢复",
    content: "确定要恢复该作品吗？",
    confirmColor: "#3cc88c",
    success: (res) => {
      if (res.confirm) {
        uni.showLoading({ title: "恢复中..." })
        setTimeout(() => {
          const removedItem = recycleBinList.value.splice(index, 1)[0]
          delete removedItem.deleteTime
          workList.value.push(removedItem)
          uni.hideLoading()
          uni.showToast({ title: "已恢复作品", icon: "success" })
        }, 800)
      }
    },
  })
}

const permanentlyDeleteWork = (index) => {
  const item = recycleBinList.value[index]
  uni.showModal({
    title: "确认永久删除",
    content: "删除后将无法恢复，确定要永久删除吗？",
    confirmColor: "#FF4500",
    success: (res) => {
      if (res.confirm) {
        uni.showLoading({ title: "删除中..." })
        setTimeout(() => {
          recycleBinList.value.splice(index, 1)
          uni.hideLoading()
          uni.showToast({ title: "已永久删除", icon: "success" })
        }, 800)
      }
    },
  })
}

const toPointsDetail = () => {
  uni.navigateTo({
    url: "/pages/points/detail",
  })
}

const rechargePoints = () => {
  uni.showToast({
    title: "积分充值功能开发中",
    icon: "none",
  })
}

const exchangeRewards = () => {
  uni.showToast({
    title: "积分兑换中心开发中",
    icon: "none",
  })
}

const changeTab = (index) => {
  currentTab.value = index
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f7f7f7;
}

.user-info {
  margin: 20rpx 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  padding: 40rpx 30rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
}

.user-info .user-avatar {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 30rpx;
}

.user-info .user-avatar image {
  width: 100%;
  height: 100%;
}

.user-info .user-detail .user-name-and-icons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}

.user-info .user-detail .user-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.user-info .user-detail .user-icons {
  display: flex;
  gap: 20rpx;
  margin-left: 100rpx;
}

.user-info .user-detail .user-status {
  display: flex;
  gap: 30rpx;
  margin-bottom: 15rpx;
}

.user-info .user-detail .user-status .user-points,
.user-info .user-detail .user-status .user-vip {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #666;
  gap: 8rpx;
}

.user-info .user-detail .user-phone {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #666;
  gap: 8rpx;
}

.stats-cards {
  display: flex;
  background-color: #fff;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  margin: 0 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.stats-cards .stats-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stats-cards .stats-card .stats-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.stats-cards .stats-card .stats-name {
  font-size: 26rpx;
  color: #666;
}

.combined-box {
  margin: 20rpx 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.tabs {
  display: flex;
  padding: 0 30rpx;
}

.tabs .tab-item {
  flex: 1;
  text-align: center;
  padding: 25rpx 0;
  font-size: 28rpx;
  color: #666;
  position: relative;
}

.tabs .tab-item.active {
  color: #3cc88c;
  font-weight: 500;
}

.tabs .tab-item.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 4rpx;
  background-color: #3cc88c;
  border-radius: 2rpx;
}

.works-management {
  padding: 20rpx 30rpx;
}

.works-management .works-list {
  display: flex;
  flex-direction: column;
}

.works-management .work-card {
  padding: 15rpx 0;
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.works-management .work-card:hover {
  transform: translateY(-5rpx);
}

.works-management .work-card .work-cover {
  position: relative;
  width: 100%;
  height: 200rpx;
  border-radius: 12rpx;
  overflow: hidden;
  margin-bottom: 20rpx;
}

.works-management .work-card .work-cover image {
  width: 100%;
  height: 100%;
}

.works-management .work-card .work-info {
  padding: 0 20rpx 20rpx;
}

.works-management .work-card .work-info .work-title-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.works-management .work-card .work-info .work-title {
  font-size: 30rpx;
  font-weight: 500;
  color: #333;
  max-width: 85%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.works-management .work-card .work-info .work-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.works-management .work-card .work-info .work-meta .work-date {
  font-size: 30rpx;
  color: #999;
}

.works-management .work-card .work-info .work-meta .work-actions {
  display: flex;
  align-items: center;
  gap: 20rpx;
  font-size: 24rpx;
  color: #3cc88c;
}

.works-management .work-card .work-options {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 20rpx 20rpx;
}

.points-card {
  padding: 30rpx;
}

.points-card .points-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25rpx;
}

.points-card .points-header .points-title {
  font-size: 30rpx;
  font-weight: 500;
  color: #333;
}

.points-card .points-header .points-more {
  font-size: 26rpx;
  color: #3cc88c;
}

.points-card .points-content {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.points-card .points-content .points-balance {
  font-size: 50rpx;
  font-weight: bold;
  color: #ff7d00;
}

.points-card .points-content .points-unit {
  font-size: 28rpx;
  color: #666;
  margin-left: 10rpx;
}

.points-card .points-content .points-benefits {
  display: flex;
  gap: 20rpx;
}

.points-card .points-content .points-benefits .benefit-item {
  font-size: 24rpx;
  color: #666;
  background-color: #f5f5f5;
  padding: 5rpx 15rpx;
  border-radius: 20rpx;
}

.points-card .points-actions {
  display: flex;
  gap: 20rpx;
  margin-top: 20rpx;
}

.points-card .points-actions .action-btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  border: none;
}

.points-card .points-actions .recharge {
  background-color: #f5f5f5;
  color: #333;
}

.points-card .points-actions .exchange {
  background-color: #3cc88c;
  color: #fff;
}

.recycle-bin {
  padding: 20rpx 30rpx;
}

.recycle-bin .works-list {
  display: flex;
  flex-direction: column;
}

.recycle-bin .work-card {
  padding: 15rpx 0;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.recycle-bin .work-card:hover {
  transform: translateY(-5rpx);
}

.recycle-bin .work-card .work-cover {
  position: relative;
  width: 100%;
  height: 200rpx;
  border-radius: 12rpx;
  overflow: hidden;
  margin-bottom: 20rpx;
}

.recycle-bin .work-card .work-cover image {
  width: 100%;
  height: 100%;
}

.recycle-bin .work-card .work-info {
  padding: 0 20rpx 20rpx;
}

.recycle-bin .work-card .work-info .work-title {
  font-size: 30rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 10rpx;
}

.recycle-bin .work-card .work-info .work-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.recycle-bin .work-card .work-info .work-meta .work-date {
  font-size: 24rpx;
  color: #999;
}

.recycle-bin .work-card .work-options {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 20rpx 20rpx;
}
</style>